import React, { Component } from 'react'
//路由传参
import {withRouter} from "react-router-dom"
import {Modal, Button, WhiteSpace, WingBlank,Toast } from "antd-mobile"
import "./index.scss"
import IntegralTs from '../../assets/img/integral-ts.png'
import IntegralLw from '../../assets/img/integral-lw.png'
import IntegralMx from '../../assets/img/integral-mx.png'
import IntegralZs from '../../assets/img/integral-zs.png'
import moment from 'moment'
import Axios from 'axios'
import { BASE_URL } from '../../utils/requestPath'
import requestAxios from '../../utils/myaxios'
//import IntegralMx from '../../assets/img/integral-mx.png'
import LwBlue from '../../assets/img/lw_blue.png' 
const operation = Modal.operation;
class Index extends Component {

    state = {
        reSet:"<",
        userCountIntegral:0,
        userInfoList:[]
    }

    handleClick = (params) => {
        this.props.history.push("/searchCenter");
    }
    
    escOnClick=()=>{
        this.props.history.push("/navigator")
    }

    async componentDidMount(){
        document.title="ポイント明細"
        console.log("进来了.........")
        await this.componentIntegral()
        await this.componentIntegralCount()
        
    }

    componentIntegralCount=()=>{
        const userInfos = localStorage.getItem("userInfoIns");
        const userInfoIns = JSON.parse(userInfos) || {};
        console.log("integral.......打印")
        console.log(userInfoIns)

        if(userInfoIns){
            //获取用户当前的积分
            requestAxios.get(BASE_URL+"/api/integral/find/list/"+userInfoIns.id).then(res=>{
                console.log(res.data)
                this.setState({
                    userCountIntegral:res.data
                })
            })
        }

        // const mainIntegralExchange = localStorage.setItem("");
        // const mainINtegralEx = JSON.parse(mainIntegralExchange);

    }

    componentIntegral=()=>{
        const userInfos = localStorage.getItem("userInfoIns");
        const userInfoIns = JSON.parse(userInfos) || {};
        const zgUserId = userInfoIns.id;
        const userInfoId = {zgUserId};
        if(userInfoIns){
            //获取用户当前的积分
            requestAxios.post(BASE_URL+"/api/order/integral/list/0/0",userInfoId).then(res=>{

               this.setState({
                   userInfoList:res.data.list
               })
            })
        }
    }

    integralOnClick=()=>{
        this.props.history.push("/exchangerecord")
    }

    render() {
        const {reSet,userCountIntegral,userInfoList} = this.state
        return (
          <div className="main-integral-detailed">
             {/* 头部,返回,评价 */}
             <header className="main-integral-header-integraldetailed">
                <div className="main-integral-header-con" onClick={this.escOnClick}>
                    <span className="main-integral-header-con-span-one-integraldetailed">{reSet}</span>
                    <span  className="main-integral-header-con-span-two-integraldetailed">戻る</span>
                </div>
                <h4>
                ポイント明細
                </h4>
                <h5 style={{color:"#fff"}}>s</h5>
            </header>

           

            {/* 积分兑换 */}
            <div className="main-integral-exchange">
               
                <div className="main0integral-300-500-1000">
                    {/* 300日元优惠券 */}
                    {/* <div className="main-integral-exchange-list-title" style={{display:"flex",flexDirection:"row",
                                justifyContent:"space-around",alignItems:"center",width:"100%",marginBottom:20
                                }}>
                        <h4>编号</h4>
                        <h4>积分</h4>
                        <h4>时间</h4>
                        <h4>新增/消费</h4>
                    </div> */}
                    {/* 头部可用积分 */}
                    <div className="main-integral-exchange-count">
                        <div className="main-integral-exchange-content">

                            <div className="main-integral-exchange-left">
                                <h3>利用可能ポイント</h3> <h4>{userCountIntegral}</h4>
                            </div>
                            <div className="main-integral-exchange-right">
                                <div className="main-integral-exchange-jf"><img src={IntegralMx}></img> <h5>ポイント明細</h5></div>
                                <div onClick={this.integralOnClick} className="main-integral-exchange-jf"><img src={LwBlue}></img> <h5>引換履歴</h5></div>
                            </div>

                            <span>您有1320积分将于10-30过期</span>
                        </div>
                        
                    </div>
                    {/* <div className="main-integral-exchange-list" style={{width:"100%",paddingRight:20,lineHeight:2}}>
                        {this.state.userInfoList&&this.state.userInfoList.map((value,index)=>{
                            return (
                                <div style={{display:"flex",flexDirection:"row",
                                justifyContent:"space-around",alignItems:"center",
                                }} key={index}>
                                    <h4>{parseInt(index)+1}</h4>
                                    <h4>{value.integralCount}<span>积分</span></h4>
                                    <h4>{moment(new Date(parseInt(value.createTime))).format("YYYY-MM-DD")}</h4>
                                    {value.orderStart === 1?<h2>+</h2>:<h2>-</h2>}
                                </div>    
                            )
                        })}
                    </div> */}
                    {userInfoList.map((value,index)=>{
                        return (
                            <div key={index} className="main-integral-exchange-list-content">
                                <div className="main-integral-exchange-left-content">
                                    <h3>{value.orderType === 1?"新規評価するとポイントGET": value.orderType === 2?"レビューを書く、积分をもらう":value.orderType === 3?"情報を完全にするとポイントGET":value.orderType === 4?"会員新規でポイントGET":value.orderType === 5?"現金引換":value.orderType === 6?"ポイント引換":""}</h3>
                                    <h4>{moment(new Date(parseInt(value.createTime))).format("YYYY-MM-DD HH:mm:ss")}</h4>
                                </div>

                                <div className="main-integral-exchange-right-content">
                                    <span>{value.orderStart === 1?"+":"-"}{value.integralCount}</span>
                                </div>
                            </div>
                        )
                    })}
                    
                   

                </div>
               
            </div>
            
          </div>
        )
    }
}
export default withRouter(Index)
